<template>
  <div>
      <el-dialog title="进度跟踪" :visible.sync="dialogFormVisible">
        <div class="main-table">
          <el-tabs v-model="progressTracking" @tab-click="handleClick">
            <el-tab-pane label="打样进度" name="first">
              <el-table :data="nodeData" border style="width: 100%" :span-method="objectSpanMethod" >
                <el-table-column prop="scheduleNo" align="center" label="打样次数" width="100"></el-table-column>
                <el-table-column prop="operation" align ="center" width="150" label="操作">
                  <template slot-scope="scope" v-if="scope.row.activeFlag">
                    <el-button v-if="scope.row.confirmStatus == 3 && scope.row.nodeType != 3" @click="confirm(scope.row.id)" type="text" size="small">确认接受样品</el-button>
                    <el-button v-if="scope.row.confirmStatus == 0 && scope.row.nodeType != 3" @click="rejectVisible = !rejectVisible" type="text" size="small">驳回</el-button>
                    <el-button v-if="scope.row.nodeType == 3 && scope.row.startUserName == null" @click="openNodeReport(scope.row.id)" type="text" size="small">上传</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="nodeTypeName" align="center" label="节点" width="150"></el-table-column>
                <el-table-column prop="startTime" align="center" label="发起日期" width="150"></el-table-column>
                <el-table-column prop="startUserName" align="center" label="发起人" width="100"></el-table-column>
                <el-table-column prop="feedbackContent" align="center" label="提交内容" width="500"></el-table-column>
                <el-table-column prop="confirmStatus" align="center" :formatter="confirmStatus" label="确认状态" width="100"></el-table-column>
                <el-table-column prop="confirmTime" align="center" label="确认日期" width="150"></el-table-column>
                <el-table-column prop="confirmUserName" align="center" label="确认人" width="100"></el-table-column>
                <el-table-column prop="remarks" align="center" label="备注" width="200"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
        </div>
      </el-dialog>
      <!-- 上传检测报告dialog -->
      <el-dialog title="上传检测报告" :visible.sync="nodeReportVisible">
        <el-form :model="nodeReportForm">
          <el-form-item label="检测结果:" label-width="100px">
            <!-- <el-switch v-model="nodeReportForm.checkingResult" inactive-value="0" active-value="1"></el-switch> -->
            <el-radio-group v-model="nodeReportForm.checkingResult">
              <el-radio :label="1">合格</el-radio>
              <el-radio :label="0">不合格</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="检测报告:" label-width="100px">
            <el-upload
                class="upload-file"
                ref="upload"
                :action="this.lib.config.host.system + '/common/fileupload/upload'"
                :data=fileData
                :limit="1"
                :on-success="uploadSuccess"         
                :file-list="fileList">
                <el-button slot="trigger" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注:" label-width="100px">
            <el-input type="textarea" v-model="nodeReportForm.remarks" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitNodeReport(nodeReportForm)">提交</el-button>
          <el-button @click="nodeReportVisible = false">取消</el-button>
        </div>
    </el-dialog>
    <!-- 驳回dialog -->
    <el-dialog title="驳回" :visible.sync="rejectVisible">
      <el-form :model="rejectForm">
        <el-form-item label="驳回原因" label-width="100px">
          <el-input type="textarea" v-model="rejectForm.rejectContent" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCheck(checkForm)">提交</el-button>
        <el-button @click="rejectVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // 对话框显示、隐藏属性
        dialogFormVisible: false,
        nodeReportVisible: false,
        rejectVisible: false,
        progressTracking: 'first',
        feedbackHisTab:'first',
        nodeData: [],
        // 上传检测报告form
        nodeReportForm:{
          reportFileName: '',
          reportFileUrl: '',
          id:'',
          closeStatus:0,
          checkingResult:1
        },
        // 驳回form
        rejectForm:{
        },
        // 上传附件集合
        fileList: [],
        // 定义附件的业务模块和业务动作
        fileData: {
            busAction: "VENDOR_SEND",
            tableName: "NPC_TASK_VENDOR_NODE"
        },
      };
    },
    props:['itemCloseStatus','itemVendorId'],
    watch: {
      'itemVendorId':function(val){
         this.itemVendorId = val;
      }
    },
    mounted() {
    },
    methods: {
       // 节点查询
       nodeQuery(itemVendorId) {
        this.axios.post(this.lib.config.host.vendorDlv  + "/vendormgt/npc/npcTaskVendorNode/query/" + itemVendorId)
          .then(response => {
            debugger;
            this.nodeData = response.data;
          }).catch(error => {
            console.log('网络错误，不能访问');
          });
      }, 
      // 合并行对象
      objectSpanMethod({ row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            }
          } else {
              return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      },
      confirm(id){
        this.$confirm('确认操作嘛?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.axios.post(this.lib.config.host.vendorDlv + "/vendormgt/npc/npcTaskVendorNode/confirm/" + id).
           then((res)=>{
            if(res.data.success){
              debugger;
              this.$message({
                type: 'success',
                message: '确认成功!'
              });
              this.nodeQuery(this.itemVendorId);
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消确认!'
          });
        });
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleExceed(files, fileList){
        console.log(files);
        console.log(fileList);
      },
      // 自动上传附件后返回附件url和name
      uploadSuccess: function (response) {
        //附件上传成功回调
        this.nodeReportForm.reportFileName = response.fileName;
        this.nodeReportForm.reportFileUrl = response.url
      },
       // 打开检测报告dialog
      openNodeReport(npcNodeId){
        this.nodeReportVisible = true;
        this.nodeReportForm.id = npcNodeId;
        this.nodeReportForm.closeStatus = this.itemCloseStatus;
      },
      // 提交检测报告dialog
      submitNodeReport(nodeReportForm) {
        this.nodeReportVisible = false;
        this.axios.post(this.lib.config.host.vendorDlv + "/vendormgt/npc/npcTaskVendorNode/report", this.nodeReportForm)
        .then((res)=>{
          this.nodeReportVisible = false;
          if(res.data.success){
            debugger;
            this.nodeQuery(this.itemVendorId);
          }
        })
        .catch((error)=>{
          console.log(error);
        });
      },
      // 格式化列
      confirmStatus(row, column){
        if(row.confirmStatus == 1){
          return '已确认';
        } else if(row.confirmStatus == 3){
          return '待确认'
        } else{
          return '未确认';
        }
      },
    }
  }
</script>
<style>
 .upload-file{
    display: flex;
    flex-direction: row-reverse;
    height: 40px;
    width: 380px;
  }
  
  .upload-file .el-upload-list {
    display: flex;
    flex-direction: row;
    width: calc(100% - 112px);
    border: 1px solid #dcdfe6;
    margin-right: 16px;
    border-radius: 4px;
  }

  .upload-file .el-upload-list li{
    margin-top: 0;
    line-height: 38px;
    vertical-align: middle;
  }

  .upload-file .el-upload-list li .el-icon-close{
    line-height: inherit;
    top:0;
  }
</style>